<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>移动div</title>
	<style type="text/css">
	*{padding:0px; margin:0px;}
	#one{width:100px; height:100px;background :pink;
		position:absolute;
		}
	</style>
</head>
<body>
	<div id ='one'></div>
	<script type="text/javascript">
	//获取元素
	var	move =document.getElementById('one');
	// 设置全局变量
	var x =0;
	var y = 0;
	var l =0;
	var t =0;

	var isDown =false;
	// 绑定鼠标按下的事件
		//move.onmovedown =function(e)
			move.onmousedown = function(e)
		{
			//获取鼠标的x 和y
			x =e.clientX;
			y =e.clientY;
			//获取左和顶部偏移量
			t = move.offsetTop;
			l = move.offsetLeft;
			console.log(x);
			//设置开管
			isDown =true;
			
			// 设置样式
			move.style.cursor ='move';

		}

	//绑定鼠标移动的事件
	window.onmousemove = function(e)
	{
		if(isDown==false){
			return;
		}

		//获取鼠标的x y
		nx =e.clientX;
		ny= e.clientY;

		// 获取新左和顶部偏移量
		var nl = nx -(x-l);
		var nt = ny -(y-t);

		//设置样式
		move.style.left = nl +'px';
		move.style.top = nt+'px';

	}


	//绑定鼠标抬起的事件
	move.onmouseup =function()
	{
		isDown =false;
		move.style.cursor ='default';
	}


	</script>
</body>
</html>